<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .done li {
            color: gray;
            text-decoration: line-through;
        }

        .todo li {
            width: 170px;
            height: 30px;
            position: relative;
        }

        /* .todo li button{
    float: right;
} */
        .todo li button {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <input type="text" id="input" placeholder="请输入充值金额">
    <button onclick="change()">不充值，你会变强吗？</button>
    <button onclick="add()">向数组尾部添加内容</button>
    <button onclick="del()">从数组尾部删除内容</button>
    <button onclick="shift()">从数组头部删除内容</button>
    <button onclick="unshift()">从数组头部添加内容</button>
    <hr>
    <p>待办事项</p>
    <!-- 第一部分 -->
    <input type="text" placeholder="请输入代办事项">
    <button>保存</button>
    <!-- 第二部分，代办事项 -->
    <ol class="todo">
        <li>
            <span>eating</span>
            <button>完成</button>
        </li>
        <li>
            <span>sleeping</span>
            <button>完成</button>
        </li>
        <li>
            <span>eating</span>
            <button>完成</button>
        </li>
    </ol>
    <!-- 第三部分，已完成事项 -->
    <ul class="done">
        <li>大一</li>
        <li>大二</li>
        <li>大三</li>
    </ul>




    <script>
        function change() {
            // console.log(document.getElementById('input').value);
            let money = input.value;
            if (money >= 100) {
                alert('充值成功！充值金额：￥' + money + '元')
            } else {
                alert('100起充！')
            }
        }
        let str1 = 'ma yun';
        console.log(str1);
        let num1 = 19;
        console.log(num1);
        let hanWude = true;
        console.log(hanWude);
        let arr1 = [1, 2, 3, 4, 'wu', true];
        console.log(arr1);
        let person = {
            name: 'pony ma',
            age: 40,
            rich: true
        }
        let name = 'age';
        console.log(person.name);
        console.log(person[name]);
        // 点击按钮，给数组添加内容
        function add() {
            arr1.push('我是最后一项')
            console.log(arr1);
        }
        // 点击按钮，删除数据
        function del() {
            arr1.pop();
            console.log(arr1);
        }
        function shift() {
            arr1.shift();
            console.log(arr1);
        }
        function unshift() {
            arr1.unshift('一');
            console.log(arr1);
        }
    </script>
</body>

</html>